<!DOCTYPE html>
<html>
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 for Apple macOS version 5.6.0">
<title></title>
</head>
<body>
/* SoundManager 2: Basic MP3 player CSS
------------------------------------ Clicks on links to MP3s are
intercepted via JS, calls are made to SoundManager to load/play
sounds. CSS classes are appended to the link, which are used to
highlight the current play state and so on. Class names are applied
in addition to "sm2_button" base. Default: sm2_button Additional
states: sm2_playing sm2_paused eg. <!-- default -->
 <a href="some.mp3" class="sm2_button">some.mp3</a> 
<!-- playing -->
 <a href="some.mp3" class="sm2_button sm2_playing">some.mp3</a>
Note you don't require ul.graphic / ul.flat etc. for your use if
only using one style on a page. You can just use .sm2_button{} and
so on, but isolate the CSS you want. Side note: Would do multiple
class definitions eg. a.sm2_default.sm2_playing{} .. except IE 6
has a parsing bug which may break behaviour, applying sm2_playing
{} even when the class is set to sm2_default. If you want to make
your own UI from scratch, here is the base: Default + hover state,
"click to play": a.sm2_button {} a.sm2_button:hover {} Playing +
hover state, "click to pause": a.sm2_playing {} a.sm2_playing:hover
{} Paused + hover state, "click to resume": a.sm2_paused {}
a.sm2_paused:hover {} */ a.sm2_button { position:relative;
display:inline-block; /* If you worry about old browser bugs,
Firefox 2 might not like this and may need -moz-inline-box instead.
:D */ width:18px; height:18px; text-indent:-9999px; /* don't show
link text */ overflow:hidden; /* don't draw inner link text */
vertical-align:middle; /* and, a bit of round-ness for the cool
browsers. */ border-radius:6px; margin-top:-1px; /* vertical align
tweak */ /* safari 3.1+ fun (/W3 working draft extension, TBD.) */
-webkit-transition-property: hover; -webkit-transition: all 0.2s
ease-in-out; -moz-transition: all 0.2s ease-in-out 0s; /* firefox 4
(couldn't sort out -moz-transform vs. MozTransform, so, "all" for
now) */ -o-transition-property: background-color; /* opera 10.5 */
-o-transition-duration: 0.15s; /* weird IE 6/7 display fixes,
and/or I'm doing it wrong */ *text-indent:0px; *line-height:99em;
*vertical-align: top; } a.sm2_button:focus { outline:none; /* maybe
evil, but don't show the slight border outline on focus. */ }
a.sm2_button, a.sm2_button.sm2_paused:hover {
background-color:#3399cc;
background-image:url(image/arrow-right-white.png); /* where
possible, use data: and skip the HTTP request. Fancy-pants. Would
use short-hand background: for above, but IE 8 doesn't override
background-image. */
background-image:url();*/
*background-image:url(image/arrow-right-white.gif); /* IE 6+7 don't
do DATA: URIs */ background-repeat:no-repeat;
background-position:5px 50%; *background-position:5px 4px; /* IE 6
again */ } a.sm2_button:hover { background-color:#3399cc; }
a.sm2_button.sm2_playing, a.sm2_button.sm2_playing:hover {
background-color:#cc3333; } /*commenting out for ticket #2124
a.sm2_button.sm2_playing, a.sm2_button.sm2_playing:hover {
-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg); } */ a.sm2_button.sm2_paused,
a.sm2_button.sm2_paused:hover { background-color:#666; }
</body>
</html>
